<template>
    <div class="box">
        <div class="header">
            <div class="op_header banner">
                <div class="left">
                    <!-- <img class="logo" src="" alt="" /> -->
                    <h2>OPPO</h2>
                    <ul class="op">
                        <li class="op_trk">OPPO产品</li>
                        <li class="op_trk">一加产品</li>
                        <li class="op_trk">关于OPPO</li>
                        <li class="op_trk">ColorOS</li>
                    </ul>
                </div>
                <div class="right">
                    <ul class="op">
                        <li class="op_trk">官方商城</li>
                        <li class="op_trk">服务</li>
                        <li class="op_trk">企业业务</li>
                    </ul>
                    <div class="search">
                        <span class="iconfont icon-sousuo"></span>
                        <input
                            class="r_op_search"
                            type="text"
                            placeholder="搜索OPPO"
                        />
                    </div>
                    <div class="op_icon">
                        <span class="iconfont icon-sousuo"></span>
                        <span class="iconfont icon-sousuo"></span>
                    </div>
                </div>
            </div>
        </div>
        <section>
            <div style="height: 48px">
                <div class="op_nav banner">
                    <div class="left">
                        <h2>Find N3 Flip</h2>
                        <ul class="op">
                            <li class="op_trk active">概览</li>
                            <li class="op_trk">设计</li>
                            <li class="op_trk">体验</li>
                            <li class="op_trk">影像</li>
                            <li class="op_trk">性能</li>
                            <li class="op_trk">ColorOS</li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul class="op">
                            <li class="op_trk">
                                <span class="iconfont icon-sousuo"></span>
                                360°展示
                            </li>
                            <li class="op_trk">
                                <span class="iconfont icon-sousuo"></span>
                                尊享服务
                            </li>
                            <li class="op_trk">
                                <span class="iconfont icon-sousuo"></span>
                                参数
                            </li>
                        </ul>
                        <div class="nowBuy">立即购买</div>
                    </div>
                </div>
            </div>
        </section>
        <!-- <button @click="show = !show">111</button> -->
        <transition>
            <div v-show="show" class="main">
                <div class="left">
                    <div>
                        <div class="zn_xinghao">Find N3 Fild</div>
                        <div class="zn-text-inner">
                            <p>轻巧好用</p>
                            <p>出片专用</p>
                        </div>
                        <div class="h_img">
                            <img src="../assets/hasselblad.png" alt="" />
                        </div>
                    </div>
                    <div></div>
                </div>
                <div class="right">
                    <img src="../assets/phoneN3.png" alt="" />
                    <div class="star_name">
                        <p class="name">舒淇</p>
                        <p class="des">时尚影像家</p>
                    </div>
                </div>
            </div>
        </transition>

        <div class="swiper">
            <ul class="sw_ul">
                <li v-for="(item, index) in swiperData" :key="index">
                    <div
                        class="img-wrapper"
                        :style="{
                            backgroundImage: 'url(' + item.bgc + ')',
                        }"
                    >
                        <div class="contain">
                            <p class="c_title">{{ item.a }}</p>
                            <div class="c_text">
                                <p>{{ item.b }}</p>
                                <p>{{ item.c }}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <mainOppoVue></mainOppoVue>
        <threePhoneVue></threePhoneVue>
        <div class="bottom">
            <div class="b_banner">
                <ul class="banner_ul">
                    <li class="item">
                        <dl>
                            <dt class="d_item">推荐产品</dt>
                            <dd class="d_item">Find N3 Flip</dd>
                            <dd class="d_item">Find X6 系列</dd>
                            <dd class="d_item">Reno10 系列</dd>
                            <dd class="d_item">A2 Pro</dd>
                            <dd class="d_item">K11</dd>
                            <dd class="d_item">OPPO Watch 4 Pro</dd>
                            <dd class="d_item">查看全部手机</dd>
                        </dl>
                    </li>
                    <li class="item">
                        <dl>
                            <dt class="d_item">购买渠道</dt>
                            <dd class="d_item">线下体验店</dd>
                            <dd class="d_item">OPPO 商城</dd>
                            <dd class="d_item">官方授权网店</dd>
                        </dl>
                    </li>
                    <li class="item">
                        <dl>
                            <dt class="d_item">探索精彩 OPPO</dt>
                            <dd class="d_item">关于 OPPO</dd>
                            <dd class="d_item">新闻中心</dd>
                            <dd class="d_item">OPPO 社区</dd>
                            <dd class="d_item">加入我们</dd>
                            <dd class="d_item">知识产权</dd>
                            <dd class="d_item">可持续发展</dd>
                            <dd class="d_item">智慧生活系列报告</dd>
                            <dd class="d_item">安全隐私</dd>
                        </dl>
                    </li>
                    <li class="item">
                        <dl>
                            <dt class="d_item">商务合作</dt>
                            <dd class="d_item">企业业务</dd>
                            <dd class="d_item">开放平台</dd>
                            <dd class="d_item">廉洁合规</dd>
                            <dd class="d_item">媒体联络</dd>
                            <dd class="d_item">采购平台</dd>
                        </dl>
                    </li>
                    <li class="item">
                        <dl>
                            <dt class="d_item">服务与支持</dt>
                            <dd class="d_item">联系我们</dd>
                            <dd class="d_item">服务中心查询</dd>
                            <dd class="d_item">ColorOS</dd>
                            <dd class="d_item">云服务</dd>
                            <dd class="d_item">以旧换新</dd>
                            <dd class="d_item">服务政策</dd>
                            <dd class="d_item">安全响应中心</dd>
                            <dd class="d_item">进网许可标志呈现</dd>
                        </dl>
                    </li>
                    <li class="item">
                        <dl>
                            <dt class="d_item">应用与下载</dt>
                            <dd class="d_item">OPPO 商城 App</dd>
                            <dd class="d_item">预置软件公示</dd>
                            <dd class="d_item">OPPO 升级工具</dd>
                            <dd class="d_item">LOG专业调色文档</dd>
                        </dl>
                    </li>
                </ul>
                <div class="contact">
                    <div class="left">
                        <div class="ava_logo">
                            <img
                                src="https://image.oppo.com/content/dam/statics/default/footer/robot.png"
                                alt=""
                            />
                        </div>
                        <div>遇到问题？请联系我们</div>
                        <span class="iconfont icon-sousuo"></span>
                    </div>
                    <div class="right">
                        <div class="r_icon">
                            <div class="item">
                                <span class="iconfont icon-sousuo"></span>
                            </div>
                            <div class="item">
                                <span class="iconfont icon-sousuo"></span>
                            </div>
                            <div class="item">
                                <span class="iconfont icon-sousuo"></span>
                            </div>
                        </div>
                        <div class="r_lang">China(简体中文)</div>
                    </div>
                </div>
                <div class="b_last">
                    <div class="left">
                        <ul class="last_ul">
                            <li>隐私政策</li>
                            <li>用户协议</li>
                            <li>法务合规</li>
                            <li>知识产权</li>
                            <li>粤公网安备 44190002001935号</li>
                            <li>
                                © 2004 - 2023 OPPO 版权所有 粤ICP备08130115号
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <p>返回顶部</p>
                        <span class="iconfont icon-sousuo"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 悬浮图标 -->
        <div class="flotIcon">
            <div class="item">
                <span class="iconfont icon-sousuo"></span>
            </div>
            <div class="item">
                <span class="iconfont icon-sousuo"></span>
            </div>
            <div class="item">
                <span class="iconfont icon-sousuo"></span>
            </div>
        </div>
    </div>
</template>
<script>
import mainOppoVue from "./components/mainOppo.vue";
import threePhoneVue from "./components/threePhone.vue";
export default {
    data() {
        return {
            swiperData: [
                {
                    a: "口袋折叠设计",
                    b: "美学新镜",
                    c: "诠释优雅",
                    bgc: require("../assets/aa.png"),
                },
                {
                    a: "全新外屏【任意窗】",
                    b: "轻松交互",
                    c: "实用高效",
                    bgc: require("../assets/bb.jpg"),
                },
                {
                    a: "超光影三摄",
                    b: "旗舰影像",
                    c: "开启后自拍时代",
                    bgc: require("../assets/cc.jpg"),
                },
                {
                    a: "专业哈苏人像",
                    b: "人像专拍",
                    c: "大片自拍",
                    bgc: require("../assets/dd.jpg"),
                },
                {
                    a: "性能新标杆",
                    b: "超强能效",
                    c: "续航无忧",
                    bgc: require("../assets/ee.jpg"),
                },
            ],
            show: true,
        };
    },
    methods: {
        scrollAA() {
            const swiper = document.querySelector(".swiper");
            swiper.addEventListener("wheel", function (event) {
                swiper.scrollLeft += event.deltaY / 1.6;
                const ul = event.target.parentNode.parentNode;
                // console.log(
                //     window.innerWidth,
                //     ul.offsetWidth,
                //     window.innerWidth - ul.offsetWidth,
                //     swiper.scrollLeft
                // );
                if (
                    swiper.scrollLeft <= window.innerWidth - ul.offsetWidth ||
                    swiper.scrollLeft >= 320
                )
                    return true;

                // 获取div元素
                var div = document.querySelector(".swiper");

                // 监听滚动事件
                window.addEventListener("scroll", function () {
                    // 获取div元素距离页面顶部的距离
                    var divTop = div.offsetTop;

                    // 获取页面滚动的距离
                    var scrollHeight =
                        window.pageYOffset ||
                        document.documentElement.scrollTop ||
                        document.body.scrollTop;

                    // 计算div随着滚动条滚动之后距离顶部的距离
                    var distanceToTop = divTop - scrollHeight;
                    if (distanceToTop <= -600) {
                        div.style.width = "97%";
                        div.style.height = "97%";
                        div.style.top = -30 + "px";
                    } else {
                        div.style.width = "100%";
                        div.style.height = "100%";
                        div.style.top = 0 + "px";
                    }
                });
                event.preventDefault();
            });
        },
        scrollMain() {
            const main = document.querySelector(".main");
            // 获取div元素
            var div = document.querySelector(".main");

            // 监听滚动事件
            window.addEventListener("scroll", function () {
                // 获取div元素距离页面顶部的距离
                var divTop = div.offsetTop;

                // 获取页面滚动的距离
                var scrollHeight =
                    window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;

                // 计算div随着滚动条滚动之后距离顶部的距离
                var distanceToTop = divTop - scrollHeight;
                const aa = document.querySelector(".zn-text-inner");
                const bb = document.querySelector(".zn_xinghao");
                // console.log(distanceToTop);
                if (distanceToTop <= -100) {
                    aa.style.top = -200 + "px";
                    bb.style.top = -200 + "px";
                } else {
                    aa.style.top = 0;
                    bb.style.top = 0;
                }
            });
        },
    },
    created() {},
    components: { mainOppoVue, threePhoneVue },
    mounted() {
        this.scrollAA();
        this.scrollMain();
    },
};
</script>
<style scoped lang="scss">
@import url("//at.alicdn.com/t/c/font_4281261_z4futnzyn5.css");
.box {
    background-color: #eaeaea;
}
li {
    list-style: none;
}
.flotIcon {
    position: fixed;
    right: 110px;
    bottom: 20px;
    font-size: 0;
    z-index: 9999;
    transition: bottom 0.3s;
    .item {
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        border-radius: 50%;
        background-color: #fff;
        margin-top: 10px;
    }
    .item:hover {
        cursor: pointer;
    }
}
.banner {
    // width: 1857px;
    width: 1800px;
    margin: 0 auto;
}
.header {
    width: 100%;
    border-bottom: 1px solid rgb(236, 236, 236);
}
.op_header {
    height: 52px;
    line-height: 52px;
    display: flex;
    justify-content: space-between;
    .left,
    .right {
        display: flex;
        .logo {
            width: 50px;
        }
        .op {
            margin-left: 40px;
            list-style: none;
            .op_trk {
                color: rgba(0, 0, 0, 0.55);
                list-style: none;
                font-size: 14px;
                float: left;
                padding: 0 16px;
            }
        }
    }
    .left {
        h2 {
            height: 12px;
        }
        .op {
            .op_trk:hover {
                cursor: pointer;
                color: #000;
                border-bottom: 2px solid #000;
                font-weight: 700;
            }
        }
    }
    .right {
        display: flex;
        align-items: center;
        .op {
            .op_trk:hover {
                color: #333;
                cursor: pointer;
            }
        }
        .search {
            background-color: rgb(246, 246, 246);
            height: 38px;
            line-height: 38px;
            padding-left: 0px;
            border-radius: 50px;
            .iconfont {
                margin: 0 10px;
            }
            input:focus::-webkit-input-placeholder {
                color: transparent;
            }
            .r_op_search {
                background-color: rgb(246, 246, 246);
                outline: none;
                border: none;
            }
            .r_op_search:hover {
                background-color: #f1f1f1;
            }
        }
        .search:hover {
            background-color: #f1f1f1;
            .r_op_search {
                background-color: #f1f1f1;
            }
        }
        .op_icon {
            .iconfont {
                margin-left: 10px;
            }
        }
    }
}
section {
    position: sticky;
    top: 0%;
    background-color: #fff;
    z-index: 99999;
    .active {
        border-bottom: 1px solid #2ec84e;
        color: #000 !important;
        font-weight: 700;
    }
    border-bottom: 1px solid rgb(236, 236, 236);
    .op_nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 48px;
        h2 {
            font-size: 16px;
            color: rgba(0, 0, 0, 0.8);
        }
        .left,
        .right {
            display: flex;
            .logo {
                width: 40px;
            }
            .op {
                margin-left: 40px;
                list-style: none;
                .op_trk {
                    color: rgba(0, 0, 0, 0.55);
                    list-style: none;
                    font-size: 14px;
                    float: left;
                    padding: 0 12px;
                }
                .op_trk:hover {
                    color: #000;
                    cursor: pointer;
                }
            }
            .nowBuy {
                background-color: #2cff73;
                padding: 0 20px;
                // width: 93px;
                height: 36px;
                border-radius: 36px;
                line-height: 36px;
                text-align: center;
                font-size: 14px;
                font-weight: 700;
            }
            .nowBuy:hover {
                cursor: pointer;
            }
        }
        .right {
            display: flex;
            align-items: center;
            .op {
                display: flex;
                align-items: center;
                color: #3e3e3e;
                .op_trk {
                    color: #111;
                    font-size: 14px;
                    height: 36px;
                    line-height: 36px;
                }
                .op_trk:hover {
                    background-color: #f6f6f6;
                    cursor: pointer;
                    border-radius: 36px;
                }
            }
        }
    }
}
.main {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: calc(100vh - 101px);
    background: linear-gradient(0deg, #eaeaea 0%, #fdfdfd 100%);
    overflow: hidden;
    .left {
        transform: translateX(30%);
        // background: url('../assets/bg.jpg');
        .zn_xinghao {
            position: relative;
            font-size: 32px;
        }
        .h_img {
            margin-top: 150px;
        }
        .zn-text-inner {
            position: relative;
            font-size: 68px;
            font-weight: 700;
            transition: all 0.3s;
        }
    }
    .right {
        transform: translateX(-5%);
        display: flex;
        position: relative;
        img {
            // width: 1038px;
        }
        .star_name {
            position: absolute;
            bottom: 210px;
            right: -100px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            .name {
                font-size: 20px;
                font-weight: 700;
            }
            .des {
                font-size: 16px;
            }
        }
    }
}
.fade {
    background-color: red;
}

.v-enter-active,
.v-leave-active {
    transition: all 0.8s ease;
}
.v-enter,
.v-leave-to {
    transform: translateX(100px);
    opacity: 0;
}
</style>
